<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"  %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%@ page import="javax.servlet.http.HttpServletRequest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>用户注册页面</title>
	<link href="../image/icon.jpg" rel="icon">
	<link href="../css/bootstrap.css" rel="stylesheet" >
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript" src="../js/bootstrap.js"></script>
</head>
<body>
	<%-- <% request.setAttribute("hello", "helloworld"); %>
	<jsp:forward page="article.jsp"></jsp:forward> --%>  
	<div class="container" style="margin-top: 5%">
		<div class="col-md-4"></div>
		<div class="col-md-4">
			<div class="wrap">
	    		<div class="login">
	      			<h3 style="color: red" id="promptLable">
		      			<c:choose>
		      				<c:when test="${tips==null}">
		      					10秒注册,获得高薪
		      				</c:when>
		      				<c:when test="${tips!=null}">
		      					${tips }
		      				</c:when>
		      			</c:choose>
	      			</h3>
	      		<div data-selector="loginTpl"><style>#NTGUID__2 form{  padding: 0 10x;  position: relative;}#NTGUID__2 input{  padding: 2px 0;  height: 30px;}#NTGUID__2 .accept{  height: 20px;  color: #666;  font-size: 12px;  padding-top: 19px;  _padding: 0 0 4px 0;  _margin: 0;  font-family: "Microsoft YaHei";}#NTGUID__2 .accept label{  vertical-align: top;  _vertical-align: middle;  margin: -2px -5px 0 0;  _margin: 2px 2px 0 0;}#NTGUID__2 .accept span a{  color: #666;}#NTGUID__2 .go-login{  height: 57px;}#NTGUID__2 .go-login p{  background: #f8f8f8;  height: 56px;  line-height: 56px;  position: absolute;  left: 0;  bottom: 0;  width: 370px;  font-size: 18px;  color: #333333;  text-align: center;}#NTGUID__2 .go-login p a{  margin-right: 20px;  color: #0088bb;  text-decoration: none}#NTGUID__2 .button .btn{  background: #ff9500;  color: #FFF;  font-size: 24px;  height: 58px;  line-height: 58px;  width: 310px;  padding: 0;  border: 0;}#NTGUID__2 .button .btn:hover{  opacity: .8;  filter: alpha(opacity: 80);}#NTGUID__2 .login-form{  margin-bottom: 20px;height: 46px;}#NTGUID__2 input.text{  height: 18px;  border: 1px solid #ccc;  background: #fff;  padding: 14px 7px;  font-size: 16px;  font-family: "Microsoft YaHei";}#NTGUID__2 input.info{  width: 294px;}#NTGUID__2 .validation_def_pass{  font-size: 16px;  font-family: "Microsoft YaHei";}#NTGUID__2 input.input-verycode{  width: 114px;}#NTGUID__2 .image-verycode{  vertical-align: middle;  margin: 0 5px;}#NTGUID__2 .btn-phone-code{  font-size: 14px;  height: 36px;  line-height: 36px;  margin-left: 10px;  width: 143px;}</style>
					<div id="NTGUID__2">
		  				<form class="register-box" id="formName" onsubmit="return checkInputLegal()" method="post" >
		    				<div class="login-form" style="margin-bottom: 20px;  height: 32px;">
		      					<input  id="emailName" onblur="checkNameExist()" placeholder="请输入常用邮箱" name="registerEmail" class="text info user_email">
		    				</div>
		    				<div class="login-form" style="margin-bottom: 20px;  height: 32px;">
		      					<input type="password" placeholder="请输入注册密码" id="passName" name="registerPass" class="text info">
		    				</div>
		    				<div data-selector="email-code-wrap" class="login-form" style="margin-bottom: 20px;  height: 32px;">
		      					<input type="text" id="codeName" name="registerCode" class="text input-verycode" placeholder="请输入验证码">
		      					
		      					<img id="codeImag" class="image-verycode" src="../CodeServlet" onclick="refreshCode()"><a id="codeImag1" href="javascript:refreshCode();"  class="changecode">看不清楚?换一张</a>
		    				</div>
		    				<div class="button login-form">
		      					<input type="submit" class="btn btn-warning" style="background-color:#48D1CC;" value="免费注册">
		    				</div>
		    				<div  class="accept login-form" style="margin-bottom: 20px;  height: 32px;"> 
		      					<!-- <label>
		       						<input type="checkbox" autocomplete="off" checked="checked" class="checkbox" style="display: none;"><i data-name="" class="checkboxui checkboxui-checked" style="margin: 0px 5px 0px 0px;"></i>
		      					</label> -->
		      					<span>我已阅读并同意<a target="_blank">《用户服务协议》</a></span>
		    				</div>
		    				<div class="go-login login-form">
		      					<p class="muted text-right">已有账号？直接 <a class="goLogin" href="user-login.jsp">登录&gt;&gt;</a></p>
		    				</div>
		  				</form>
					</div>
				</div>  
	    	</div>
		</div>
	</div>
	</div>
	<script type="text/javascript">
	function refreshCode(){//刷新验证码
		document.getElementById("codeImag").src='../CodeServlet?id='+new Date();
	}
	
	function checkNameExist(){//判断输入的用户名是否存在
		var name = document.getElementById("emailName").value;
		if(name===""){
			document.getElementById("promptLable").innerHTML="邮箱名不能为空!";
		}else{
			$.ajax({
				url:'../UserServlet?op=checkUserName',
				type:'post',
				data:{'emailName':name},
				success:function(data){
					if(data === 'exist'){
						document.getElementById("promptLable").innerHTML="此用户名已注册,不可用!";
						document.getElementById("formName").action="";
						
					}else if(data === 'inexistence'){
						document.getElementById("promptLable").innerHTML="此用户名可用!";
						document.getElementById("formName").action="../UserServlet?op=registerUser";
					}
				}
			});
		}
	}
	//提交之前判断输入框是否合法
	function checkInputLegal(){
		//var emailName = document.getElementById("emailName").value;
		var passWord = document.getElementById("passName").value;
		var prompt = document.getElementById("promptLable").value;
		if(passWord===""){
			document.getElementById("promptLable").innerHTML="密码框不能为空!";
			document.getElementById("passName").focus();
			return false;
		}
	}
	
	/* setInterval(function(){//定时器
		document.getElementById("promptLable").innerHTML= '10秒注册，获得高薪';
	}, 10000) */
	
	</script>
	
</body>
</html>



